import React, {useEffect} from "react";
import {View, Text, Image, StyleSheet, ScrollView, SafeAreaView, TouchableOpacity} from "react-native";
import {useSelector} from "react-redux";
import {COLORS, emits, icons, images, SIZES} from "../constants";
import cardsImg from "../constants/cardsImg";
import {RootState} from "../types";
import {connectActionSheet} from "@expo/react-native-action-sheet";
// @ts-ignore
import RCTNativeAppEventEmitter from "react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter";
import {TabActions} from "../modules/TabModule";
import {useAction} from "../core-native";

const MenuPage = ({showActionSheetWithOptions, navigation}: any) => {
    const {userInfo} = useSelector((state: RootState) => state.app.tab);

    const logoutAction = useAction(TabActions.handleLogout);

    useEffect(() => {
        const loginSuccessListener = RCTNativeAppEventEmitter.addListener(emits.EMIT_LOGOUT, () => {
            navigation.replace("Login");
        });
        return () => {
            loginSuccessListener.remove();
        };
    });

    const handleLogout = () => {
        showActionSheetWithOptions(
            {
                options: ["Logout", "Cancel"],
                cancelButtonIndex: 1,
                destructiveButtonIndex: 0,
            },
            (btnIdx: any) => {
                if (btnIdx === 0) {
                    logoutAction();
                }
            }
        );
    };

    if (!userInfo) {
        return null;
    }
    return (
        <View
            style={{
                flex: 1,
                backgroundColor: COLORS.black,
                paddingHorizontal: SIZES.SPACE_S,
            }}
        >
            <SafeAreaView>
                <View style={styles.haderWra}>
                    <View style={{flexDirection: "row", alignItems: "center"}}>
                        <Image source={images.avatar} style={styles.avatar} />
                        <View style={{marginLeft: 10}}>
                            <Text style={styles.headerTxt1}>ID: 707380414</Text>
                            <Text style={styles.headerTxt2}>{userInfo?.nickname}</Text>
                        </View>
                    </View>
                    <TouchableOpacity style={styles.logoutWra} onPress={handleLogout}>
                        <Text style={styles.logoutTxt}>Logout</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
            <View style={styles.infoListWra}>
                <View style={styles.infoListItem}>
                    <Text style={styles.infoListTxt1}>520.00</Text>
                    <Text style={styles.infoListTxt2}>Banlance</Text>
                </View>
                <View style={styles.infoListLine} />
                <View style={styles.infoListItem}>
                    <Text style={styles.infoListTxt1}>3</Text>
                    <Text style={styles.infoListTxt2}>Cards</Text>
                </View>
                <View style={styles.infoListLine} />
                <View style={styles.infoListItem}>
                    <Text style={styles.infoListTxt1}>120</Text>
                    <Text style={styles.infoListTxt2}>Comments</Text>
                </View>
            </View>
            <View style={styles.cardWra}>
                <View style={styles.cardHeaderWra}>
                    <Text style={styles.cardHeaderTxt}>My Cards</Text>
                    <TouchableOpacity>
                        <Image source={icons.add} style={styles.cardAddIcon} />
                    </TouchableOpacity>
                </View>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <TouchableOpacity>
                        <Image source={cardsImg.card1} style={styles.cardImg} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image source={cardsImg.card2} style={styles.cardImg} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image source={cardsImg.card3} style={styles.cardImg} />
                    </TouchableOpacity>
                </ScrollView>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {flex: 1, backgroundColor: COLORS.black},
    avatar: {
        width: 75,
        height: 75,
        borderRadius: 75,
        borderWidth: StyleSheet.hairlineWidth * 5,
        borderColor: "#fff",
    },
    haderWra: {
        paddingTop: 20,
        flexDirection: "row",
        alignItems: "center",
        paddingBottom: 20,
    },
    headerTxt1: {
        color: COLORS.lightGray2,
    },
    headerTxt2: {
        color: "#fff",
        fontWeight: "bold",
        fontSize: 24,
    },
    logoutWra: {
        backgroundColor: COLORS.primary,
        marginLeft: "auto",
        paddingVertical: 8,
        paddingHorizontal: 14,
        borderRadius: 25,
    },
    logoutTxt: {
        color: "#fff",
        fontSize: 18,
    },
    infoListWra: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: 15,
    },
    infoListTxt1: {
        color: "#FFD8A6",
        fontSize: 24,
        fontWeight: "bold",
        lineHeight: 24,
        marginBottom: 5,
    },
    infoListTxt2: {
        color: "#FFD8A6",
    },
    infoListItem: {
        alignItems: "center",
    },
    infoListLine: {
        width: StyleSheet.hairlineWidth * 1.5,
        backgroundColor: "#FFD8A6",
        height: 30,
    },
    cardWra: {
        backgroundColor: "#ffffff22",
        paddingHorizontal: SIZES.SPACE_S,
        borderRadius: 10,
        flex: 1,
        marginBottom: 5,
    },
    cardHeaderWra: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: 20,
    },
    cardHeaderTxt: {
        color: "#fff",
        fontWeight: "bold",
        fontSize: 22,
    },
    cardAddIcon: {
        width: 30,
        height: 30,
    },
    cardImg: {
        width: "100%",
        height: 200,
        marginBottom: 20,
        borderRadius: 20,
    },
});

export default connectActionSheet(MenuPage);
